<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">
    <!-- Styles -->
    <link href="assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/lib/nixon.css" rel="stylesheet">
    <link href="assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Include Element UI JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<script>
    function verify() {
        var verify = localStorage.getItem("verify")
        var username = localStorage.getItem("username")
        if (verify == null || verify == "" || verify == '' || verify != username) {
           alert("请先登录")
        window.location.href = 'signin.html'
        }
    }
</script>

<body onload="verify()">
    <!-- 侧边栏 -->
    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <ul>
                    <li><a href="message.html"><i class="ti-user"></i> 留言列表</a></li>
                    <li><a href="product.html"><i class="ti-layout-grid2-alt"></i> 商品列表</a></li>
                    <li>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!--顶部 -->
    <div class="header">
        <div class="pull-left">
            <div class="logo">
                <a href="index.html" style="color: aliceblue; font-size: 20px;">
                    Truehope
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>
        <style>
            button {
                /* 添加与 Element Plus el-button type="primary" 相同的样式 */
                background-color: #f6f7f8;
                /* 设置背景颜色 */
                color: #2584e4;
                /* 设置文字颜色 */
                border: 1px solid #2584e4;
                /* 设置边框样式 */
                padding: 8px 16px;
                /* 设置内边距 */
                border-radius: 4px;
                /* 设置圆角 */
                cursor: pointer;
                /* 设置鼠标样式为手型 */
                font-size: 13px;

            }

            button:focus {
                outline: none;
            }

            button:hover {
                background-color: #e4ece8;
                color: #202020;
            }
        </style>
        <script>
            function logout(){
                localStorage.clear()
            window.location.href = 'index.html'
            }
           
        </script>
        <div class="pull-right">
            
            <button onclick="window.location.href='register.html'">注 册</button>
            <button onclick="logout()">退出</button>
        </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <h1>导航</h1>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="#">导航</a></li>
                                    <li class="active">留言列表</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- /# column -->
                </div>
              

                <div id="message">
                    <el-button type="primary" @click="insertProduct">新增</el-button>
                    <el-table :data="productList" border style="width: 100%">
                        <el-table-column prop="name" label="商品名称" width="180" align="center"></el-table-column>
                        <el-table-column prop="text" label="商品介绍" width="180" align="center"></el-table-column>
                        <el-table-column label="商品图" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" style="width: 100px; height: 100px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="是否显示" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="editMessage(scope.row)">编辑</el-button>
                                <el-button type="primary" @click="delMessage(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                    <el-dialog :visible.sync="dialogVisible">
                        <el-form :model="formData">
                            <el-form-item label="商品名">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品介绍">
                                <el-input v-model="formData.text"></el-input>
                            </el-form-item>
                            <el-form-item label="商品图">
                                <el-image :src="formData.image"  style="width: 200px; height: 200px;"></el-image>
                                <input type="file" id="myfile" name="myfile">
                                <el-button @click="uploadImage" size="small" type="primary">上传文件</el-button>
                            </el-form-item>
                            <el-form-item label="是否显示(0不显示,1显示)">
                                <el-input v-model="formData.type"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button-group>
                            <el-button @click="cancelEdit">取消</el-button>
                            <el-button type="primary" @click="saveEdit">保存</el-button>
                        </el-button-group>
                    </el-dialog>
                </div>

                <script>
                    new Vue({
                        el: '#message',
                        data() {
                            return {
                                productList: [],
                                pageNum: 1,
                                pageSize: 10,
                                total: 0,
                                dialogVisible: false,
                                formData: {
                                    id:'',
                                    username: '',
                                    text: '',
                                    image: '',
                                    type:''
                                }
                            };
                        },
                        mounted() {
                            this.getMessageLists();
                        },
                        methods: {
                            insertProduct(){
                                this.dialogVisible = true;
                                this.formData = {}
                            },
                            uploadImage() {
                                var self = this; // 保存当前this指向
                                // 发起ajax请求,转换成base64格式的图片
                                var formData = new FormData();
                                formData.append('file', $('#myfile')[0].files[0]);
                                $.ajax({
                                    url: 'http://localhost:8080/user/uploadImage',
                                    type: 'POST',
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success: function (data) {
                                        // console.log(data);
                                        self.formData.image = data

                                    },
                                    error: function () {
                                        alert('文件上传失败，请重试！');
                                    }
                                });
                            },
                            cancelEdit() {
                                this.dialogVisible = false;
                            },
                            convertImageToBase64(imageUrl) {
                                // 将图片转换为Base64格式的方法
                                // 可以使用Canvas等方式进行转换
                            },
                            getMessageLists() {
                                // 根据分页信息请求数据
                                $.ajax({
                                    url: `http://localhost:8080/user/getProductList?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
                                    type: 'get',
                                    success: (data) => {
                                        console.log(data)
                                        this.productList = data.list;
                                        this.total = data.total;
                                    },
                                    error: (error) => {
                                        console.error('Error fetching data:', error);
                                    }
                                });
                            },
                            handleSizeChange(val) {
                                this.pageSize = val;
                                this.getMessageLists();
                            },
                            handleCurrentChange(val) {
                                this.pageNum = val;
                                this.getMessageLists();
                            },
                            deleteMessage(row) {
                                // 删除操作逻辑
                                console.log('Delete message:', row);
                            },
                            delMessage(row){
                                console.log(row.id)
                                var id = row.id
                                $.ajax({
                                    url: 'http://localhost:8080/user/delProduct?id=' + id,
                                    type: 'get',
                                    success: (data) => {
                                        if(data == 200){
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '删除成功',
                                            type: 'success'
                                            });
                                        }else{
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '删除失败',
                                            type: 'error'
                                        });
                                        }
                                        this.getMessageLists()
                                    },
                                    error: (error) => {
                                        console.error('Error fetching data:', error);
                                    }
                                });
                            },
                            editMessage(row) {
                                this.dialogVisible = true;
                                this.formData = { ...row }; // 将row数据赋值给formData
                            },
                            cancelEdit() {
                                this.dialogVisible = false;
                            },
                            saveEdit() {
                                // 调用后端保存接口，this.formData中包含编辑后的数据
                                if(this.formData.id){
                                    $.ajax({
                                    url: 'http://localhost:8080/user/updateProduct',
                                    type: 'post',
                                    data:this.formData,
                                    success: (data) => {
                                        if(data == 200){
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '操作成功',
                                            type: 'success'
                                            });
                                        }else{
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '操作失败',
                                            type: 'error'
                                        });
                                        }
                                        this.dialogVisible = false;
                                        this.getMessageLists()
                                    },
                                    error: (error) => {
                                        console.error('Error fetching data:', error);
                                    }
                                });
                                    
                                }else{
                                    $.ajax({
                                    url: 'http://localhost:8080/user/insertProduct',
                                    type: 'post',
                                    data:this.formData,
                                    success: (data) => {
                                        if(data == 200){
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '新增成功',
                                            type: 'success'
                                            });
                                        }else{
                                            // 在需要显示成功提示的地方调用Message.success()方法
                                            this.$message({
                                            message: '新增失败',
                                            type: 'error'
                                        });
                                        }
                                        this.dialogVisible = false;
                                        this.getMessageLists()
                                    },
                                    error: (error) => {
                                        console.error('Error fetching data:', error);
                                    }
                                });
                                }
                            }
                        }
                    });
                </script>
            </div>
        </div>
    </div>
</body>

</html>